<template>


    <a-modal :title="false" :width="1200" :destroyOnClose="true" :maskClosable="false"
             :visible="visible" @cancel="handleCancel">

        <a-tabs default-active-key="1"  size="large">
            <a-tab-pane key="1" tab="任务信息">
                <div class="tabBox">


                    <a-descriptions bordered >
                        <a-descriptions-item label="任务编号">
                            {{taskMain.id}}
                        </a-descriptions-item>

                        <a-descriptions-item label="任务类型">
                            {{ $exMod.findDict(TaskTypeOPT, taskMain.type) }}
                        </a-descriptions-item>


                        <a-descriptions-item label="发布时间">
                            {{taskMain.createTime}}
                        </a-descriptions-item>


                        <a-descriptions-item label="关联订单">
                            {{taskMain.orderId}}
                        </a-descriptions-item>




                        <a-descriptions-item label="任务状态">
                            {{ $exMod.findDict(TaskStatusOPT, taskMain.status) }}
                        </a-descriptions-item>

                        <a-descriptions-item label="关联车牌">
                            {{taskMain.plateNo}}
                        </a-descriptions-item>

                        <a-descriptions-item label="车位号">
                            {{taskMain.seatCode}}
                        </a-descriptions-item>
                        <a-descriptions-item label="场地名称" :span="2">
                            {{taskMain.placeName}}
                        </a-descriptions-item>





                        <a-descriptions-item label="任务摘要" :span="3">
                            {{taskMain.digest}}

                        </a-descriptions-item>

                    </a-descriptions>


                    <div v-if="taskMain.finishTime">
                    <a-divider orientation="left"><span class="text-aux font-size-14">完成信息 </span></a-divider>


                    <a-descriptions bordered  >


                        <a-descriptions-item label="执行人">
                            {{taskMain.finishCashierName}}
                        </a-descriptions-item>


                        <a-descriptions-item label="执行时间">
                            {{taskMain.finishTime}}
                        </a-descriptions-item>


                        <a-descriptions-item label="车牌信息" >
                            {{taskMain.finishPlateNo}}
                        </a-descriptions-item>

                        <a-descriptions-item label="备注文本" :span="3"  v-if="taskMain.finishNotes">
                            {{taskMain.finishNotes}}
                        </a-descriptions-item>


                        <a-descriptions-item label="上传图片" :span="3" v-if="taskMain.finishPicture">
                            <a :href="taskMain.finishPicture" TARGET="_blank">
                            <img width="300" :src="taskMain.finishPicture"/>
                            </a>
                        </a-descriptions-item>


                    </a-descriptions>

                    </div>
                </div>
            </a-tab-pane>

            <a-tab-pane key="2" tab="任务日志">
                <div class="tabBox maxHeight">

                    <a-timeline v-if="logList.length>0">
                        <a-timeline-item v-for="(item,index) in logList" :key="index">
                            <p class="margin-b-1rem font-size-14"> {{item.remark}}</p>
                            <p class="font-size-12 text-aux">{{item.createTime}}</p>
                        </a-timeline-item>

                    </a-timeline>

                    <a-empty v-else description="当前任务没有日志记录"/>


                </div>
            </a-tab-pane>

        </a-tabs>


        <template slot="footer">
            <p class="text-left font-size-12 text-aux">说明:在任务信息中 所有参数值为字符【ROBOT】的数据项,均是由智能硬件终端触发的相关事件</p>
        </template>
    </a-modal>

</template>
<script>
    import {taskFind} from '../public/http.js';
    import {dictLoad} from "../../../util/internal.api";

    export default {
        props: ['record'],
        data() {
            return {
                loading: false, //按钮Loading
                title: "任务详情",
                visible: true, //modal 显示状态
                taskMain: {},    //任务对象
                logList: [], //日志列表
                TaskTypeOPT: [],
                TaskStatusOPT: [],

            };
        },
        methods: {

            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeModal', {
                    render: false
                });
            },

            async init() {
                dictLoad("ParkingTaskType").then(res => this.TaskTypeOPT = res);
                dictLoad("ParkingTaskStatus").then(res => this.TaskStatusOPT = res);

                await taskFind(this.record.id).then(res => {
                    if (res.code === 0) {
                        this.taskMain = res.data.main;
                        this.logList = res.data.logList;

                    }

                })
            },


        },

        created() {
            this.init();
        }
    };
</script>


<style lang="scss" scoped>

    .tabBox {
        min-height: 450px;
        padding: 10px;

    }

    .maxHeight {
        max-height: 650px;
        overflow-y: scroll;
    }

    .cover {

        height: 150px;
        overflow: hidden;
        background-color: #F8F8F8;
    }

    .description {
        li {
            font-size: 13px;
            height: 20px;
            line-height: 20px;
        }

    }
</style>